<template>
  <div id="userTask">
    <div class="userMaterialTitle">
      <h2 :class="{active: titleTabIndex === 0}" @click="titleTabIndex = 0">我的任务 <span></span></h2>
      <h2 :class="{active: titleTabIndex === 1}" @click="titleTabIndex = 1">我接取的 <span></span></h2>
      <h2 :class="{active: titleTabIndex === 2}" @click="titleTabIndex = 2">发布任务 <span></span></h2>
    </div>
    <div class="userTaskContent">
      <div class="userTaskContentMyTask" v-show="titleTabIndex === 0">
        <ul>
          <li v-for="(item, index) in needsIssueData" :key="'issue' + index">
            <h2>{{item.title}}</h2>
            <p class="userTaskContentTime">{{item.createTime}}</p>
            <div class="userTaskContentPrice">
              费用
              <span>{{item.price}}</span>
              有效期
              <span>{{item.expiryDate}}天</span>
            </div>
            <p>项目要求：<div v-html="item.detail"></div></p>
            <p>设计师要求：<div v-html="item.designerAsk"></div></p>
            <div class="userTaskContentOperate">
              <div class="btnBox">
                <button class="btnDef btnRed" @click="handRemoveTask(item.id)">删除</button>
                <!-- <button class="btnDef" @click="editContents()">编辑</button> -->
                <button class="btnDef" @click="handLookTask(item.id)">查看方案</button>
                <!-- <button class="btnDef btnClose">关闭任务</button> -->
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="userTaskContentMyTask" v-show="titleTabIndex === 1">
        <ul>
          <li v-for="(item, index) in needsReceiveData" :key="'receive' + index">
            <h2>{{item.title}}</h2>
            <p class="userTaskContentTime">{{item.createTime}}</p>
            <div class="userTaskContentPrice">
              费用
              <span>{{item.price}}</span>
              有效期
              <span>{{item.expiryDate}}天</span>
            </div>
            <p>项目要求：<div v-html="item.detail"></div></p>
            <p>设计师要求：<div v-html="item.designerAsk"></div></p>
          </li>
        </ul>
      </div>
      <div class="userTaskContentPublish" v-show="titleTabIndex === 2">
        <ul>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>需求标题：</span>
            </div>
            <div class="userMaterialMaterialRight">
              <input type="text" placeholder="请输入需求标题" v-model="needsTitle">
            </div>
          </li>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>有效天数：</span>
            </div>
            <div class="userMaterialMaterialRight">
              <input type="text" placeholder="请输入有效天数" v-model="needsExpiryDate">
            </div>
          </li>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>价格：</span>
            </div>
            <div class="userMaterialMaterialRight">
              <input type="text" placeholder="请输入价格" v-model="needsPrice">
            </div>
          </li>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>所属分类：</span>
            </div>
            <div class="userMaterialMaterialRight">
              <select @change="onClassifyChange($event)" v-model="needsCategoryText">
                <option v-for="(item, index) in needsClassify" :key="index">{{item.classifyName}}</option>
              </select>
            </div>
          </li>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>联系电话：</span>
            </div>
            <div class="userMaterialMaterialRight">
              <input type="text" placeholder="请输入联系电话" v-model="needsPhone">
            </div>
          </li>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>项目详情：</span>
            </div>
            <div class="userMaterialMaterialRight">
              <!-- <textarea placeholder="请输入项目详情" v-model="needsDetail"></textarea> -->
              <div id="editor"></div>
            </div>
          </li>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>设计师要求：</span>
            </div>
            <div class="userMaterialMaterialRight">
              <textarea placeholder="请输入设计师要求" v-model="needsDesignerAsk"></textarea>
            </div>
          </li>
        </ul>
        <div class="btnBox" style="width: 1.5rem;">
          <button class="btnDef" @click="handAddNeeds()">提交</button>
        </div>
      </div>
    </div>
    <popup v-model="planPopup" position="top" >
      <div class="userTaskShowBox">
        <div class="userTaskShowBoxSon" v-for="(item, index) in tasks" :key="index">
          <img :src="item.accessory" alt="">
          <div>
            <p><img class="userTaskAvatar" :src="$globalImageUrl + item.avatar" alt=""></p>
            <p>{{item.userName}}</p>
            <span>方案说明： {{item.easyIntroduce}}</span>
          </div>
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
import userSelect from '../../components/userSelect/userSelect.vue'
import { Popup } from 'vux'
import '../../assets/js/wangEditor'

export default {
  name: 'userTask',
  components: {
    userSelect,
    Popup
  },
  data () {
    return {
      titleTabIndex: 0,
      needsTitle: '',
      needsExpiryDate: '',
      needsPrice: '',
      needsDesignerAsk: '',
      needsDetail: '',
      needsCategoryText: '',
      needsCategoryId: '',
      needsPhone: '',
      needsClassify: [],
      needsData: [],
      needsIssueData: [],
      needsReceiveData: [],
      planPopup: false,
      editContent: false,
      tasks: [],
      editor: Object
    }
  },
  created () {
    this.fetchSkillSelectClassify()
    this.fetchNeeds()
    // 初始化富文本
    this.$nextTick(() => {
      // eslint-disable-next-line
      this.editor = new window.wangEditor('#editor')
      this.editor.customConfig.uploadImgServer = this.$globalImageUrl + '/web/area/uploadImage' // 上传路径
      this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 // 上传大小
      this.editor.customConfig.uploadImgMaxLength = 1 // 上传数量
      this.editor.customConfig.uploadFileName = 'file' // 自定义第一个图片文件参数名
      this.editor.customConfig.uploadImgTimeout = 5000 // 请求时限
      this.editor.customConfig.uploadImgHooks = {
        fail: (xhr, editor, result) => {
          this.$vux.toast.text('图片插入时出错')
        },
        error: (xhr, editor) => {
          this.$vux.toast.text('上传图片时出错')
        },
        timeout: (xhr, editor) => {
          this.$vux.toast.text('上传图片超时')
        },
        customInsert: function (insertImg, result, editor) {
          insertImg(result.data.url)
        }
      }
      this.editor.customConfig.customAlert = (info) => {
        this.$vux.toast.text(info)
      }
      this.editor.create()
    })
  },
  methods: {
    onClassifyChange (e) {
      for (let i = 0; i < this.needsClassify.length; i++) {
        if (this.needsCategoryText === this.needsClassify[i].classifyName) {
          this.needsCategoryId = this.needsClassify[i].classifyId
          break
        }
      }
    },
    // 获取任务列表
    fetchNeeds () {
      this.$api.getNeeds({
        userId: this.$store.state.user.userId,
        pageNum: 1
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.needsIssueData = res.data.issue.records
          this.needsReceiveData = res.data.receive.records
        }
      })
    },
    // 获取分类列表
    fetchSkillSelectClassify () {
      this.$api.getSkillSelectClassify({
      }).then(res => {
        if (res.code === 0) {
          this.needsClassify = res.data
        }
      })
    },
    // 发布任务
    handAddNeeds () {
      let imageText = this.editor.txt.html()
      if (this.needsTitle === '') {
        this.$vux.toast.text('请输入标题')
        return
      }
      if (this.needsExpiryDate === '') {
        this.$vux.toast.text('请输入有效天数')
        return
      }
      if (this.needsPrice === '') {
        this.$vux.toast.text('请输入价格')
        return
      }
      if (this.needsDesignerAsk === '') {
        this.$vux.toast.text('请输入设计师要求')
        return
      }
      // if (this.needsDetail === '') {
      //   this.$vux.toast.text('请输入项目详情')
      //   return
      // }
      // if (this.imageText === '<p><br></p>') {
      if (imageText === '<p><br></p>') {
        this.$vux.toast.text('请输入项目详情')
        return
      }
      if (this.needsCategoryId === '') {
        this.$vux.toast.text('请选择所属分类')
        return
      }
      if (this.needsPhone === '') {
        this.$vux.toast.text('请输入联系电话')
        return
      }
      console.log(this)
      this.$api.postAddNeeds({
        userId: this.$store.state.user.userId,
        title: this.needsTitle,
        expiryDate: this.needsExpiryDate,
        price: this.needsPrice,
        designerAsk: this.needsDesignerAsk,
        detail: imageText, // this.needsDetail
        // detail: this.imageText, // this.needsDetail
        categoryId: this.needsCategoryId,
        phone: this.needsPhone
      }).then(res => {
        if (res.code === 0) {
          this.$vux.toast.text(res.msg)
          this.fetchNeeds()
          this.titleTabIndex = 0
        }
      })
    },
    // 显示/隐藏修改任务
    editContents () {
      this.editContent = !this.editContent
    },
    // 删除任务
    handRemoveTask (val) {
      this.$api.getRemoveTask({
        id: val
      }).then(res => {
        if (res.code === 0) {
          this.fetchNeeds()
        }
      })
    },
    // 查看方案
    handLookTask (val) {
      this.planPopup = true
      this.$api.getLookTask({
        needsId: val
      }).then(res => {
        if (res.code === 0) {
          console.log(res)
          this.tasks = res.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#userTask{
  .userTaskContentEdit{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    padding-top: 200px;
    .userTaskContentText{
      background-color: #fff;
    }
  }
  /deep/ .vux-popup-dialog.vux-popup-top {
    width: 8rem;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    .userTaskShowBox{
      width: 400px;
      padding: 0 50px;
      // height: 800px;
      padding-bottom: 50px;
      .userTaskShowBoxSon{
        margin-top: 50px;
        display: flex;
        align-content: center;
        img{
          width: 100px;
          height: 100px;
          margin-right: 30px;
        }
        .userTaskAvatar{
          width: 50px;
          height: 50px;
          margin-left: 10px;
          border-radius: 50%;
        }
      }
    }
  }
  .userTaskContent{
    padding: .2rem;
    .userTaskContentMyTask{
      ul{
        li{
          padding-bottom: .2rem;
          margin-bottom: .2rem;
          border-bottom: 1px solid #ccc;
          h2{
            font-size: .2rem;
            font-weight: 500;
            color: #15A29C;
            line-height: .28rem;
          }
          p.userTaskContentTime{
            font-size: .16rem;
            font-weight: 500;
            color: #999;
            line-height: .24rem;
          }
          .userTaskContentPrice{
            font-size: .16rem;
            font-weight: 500;
            color: #999;
            line-height: .24rem;
            span{
              font-size: .16rem;
              font-weight: 500;
              color: #333;
              line-height: .24rem;
            }
          }
          p{
            font-size: .16rem;
            font-weight: 500;
            color: #333;
            line-height: .24rem;
          }
          .userTaskContentOperate{
            padding-top: .2rem;
            .btnBox{
              justify-content: left;
              .btnDef{
                width: max-content;
                padding: 0 .2rem;
                margin-right: .2rem;
              }
            }
          }
        }
      }
    }
    .userTaskContentPublish{
      ul{
        padding: .1rem 0;
        li{
          display: flex;
          justify-content: space-between;
          flex-wrap: nowrap;
          align-items: center;
          padding: .1rem 0;
          .userMaterialMaterialLeft{
            width: 15%;
            padding-left: .2rem;
            text-align: right;
            span{
              font-size: .14rem;
              font-weight: 500;
              color: #333;
              line-height: .24rem;
              padding-right: .2rem;
              display: inline-block;
            }
          }
          .userMaterialMaterialRight{
            width: 85%;
            input[type="text"]{
              display: inline-block;
              width: 2rem;
              border: 1px solid #ccc;
              border-radius: .05rem;
              font-size: .14rem;
              font-weight: 500;
              color: #333;
              line-height: .4rem;
              padding: 0 .1rem;
            }
            textarea {
              display: inline-block;
              width: 2rem;
              border: 1px solid #ccc;
              border-radius: .05rem;
              font-size: .14rem;
              font-weight: 500;
              color: #333;
              line-height: .4rem;
              padding: 0 .1rem;
              resize: auto;
            }
            select{
              outline: none;
              background-color: #fff;
              height: .4rem;
              border: 1px solid #ccc;
              width: 2rem;
              border-radius: .05rem;
              padding: 0 .05rem;
              margin-right: .1rem;
            }
          }
        }
      }
    }
  }
}
</style>
